<template>
  <!-- 静态页面 开干玩的就是真实 -->
  <v-row>
    <v-col style="flex: 0;" lg="3" md="2">
      <!-- log图片 -->
      <img src="../../assets/images/logo.png" alt="">
    </v-col>
    <!-- 输入框 -->
    <v-col lg="6" md="6"> 
      <div class="searchBox">
        <!-- 下拉菜单 -->
        <div class="header-select">
          <span>{{ searchSelect }}</span>
          <ul class="header-ul">
            <li>
              <a href="#">产品</a>
            </li>
            <li>
              <a href="#">供应商</a>
            </li>
          </ul>
        </div>
        <!-- 搜索输入框 -->
        <div class="searchInput">
          <input v-model="searchVal" placeholder="输入关键字搜索产品" type="text">
          <a href="#"><img style="" src="./image/相机.png" alt=""></a>
        </div>
        <!-- 搜索按钮 -->
        <div class="searchBtn">
          <a href="#"><img src="./image/搜索.png" alt=""></a>
        </div>
      </div>
    </v-col>
    <!-- 右边小图标 -->
    <v-col lg="3" md="4" class="d-flex justify-space-between">
      <div class="header-right d-flex flex-column align-center">
        <div style="width:32px;height:32px;">
          <img src="./image/靶子.png" alt="">
        </div>
        <span>发布我的询价</span>
      </div>
      <div class="header-right d-flex flex-column align-center">
        <div style="width:32px;height:32px;">
          <img src="./image/用户.png" alt="">
        </div>
        <span><router-link to="/login">
          登录 / 加入
        </router-link> </span>
      </div>
      <div class="header-right d-flex flex-column align-center">
        <div style="width:32px;height:32px;">
          <img src="./image/信.png" alt="">
        </div>
        <span>留言</span>
      </div>
      <div class="header-right d-flex flex-column align-center">
        <div style="width:32px;height:32px;">
          <img src="./image/购物车空.png" alt="">
        </div>
        <span>询价栏</span>
      </div>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: 'MyHeader',
  data() {
    return {
      // 下拉框选择
      searchSelect:'产品',
      // 搜索表单数据
      searchVal:''
    }
  },
}
</script>

<style lang='scss' scoped>
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.searchBox {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  border-radius: 50px;
}
.header-select {
  position: relative;
  cursor: pointer;
  width: 5.3125rem;
  height: 3.0625rem;
  line-height: 49px;
  text-align: left;
  padding-left: .625rem;
  border-right: 1px solid #000;
  font-size: 1rem;
  &:hover .header-ul {
    display: block;
  }

  .header-ul {
    display: none;
    padding: 0;
    background-color: #fff;

    li {
      width: 100%;
      padding-right: 0;
      height: 1.875rem;
      text-align: left;
      line-height: 1.875rem;

      &:hover {
        background-color: rgb(218, 224, 230);
      }

      a {
        font-size: .875rem;
        color: #000;
      }
    }
  }

  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: .3125rem solid transparent;
    border-top-color: black;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
    border-bottom: none;
    transition: transform .5s ease 0s;
  }

  &:hover::after {
    transform: rotate(180deg);
  }
}
.searchInput {
  display: flex;
  align-items: center;
  padding-right: 1.25rem;
  input {
    padding-left: 1.25rem;
    height:100%;
    // width: 100%;
    width: 31.875rem;
  }
  img {
    // line-height: 2.375rem;
    margin-top: .3125rem;
  }
}
.searchBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
  background: red;
  // border-radius: 10px;
  border: 1px solid red;
  border-radius: 0px 30px 30px 0;
  text-align: center;
}
</style>